<template>
  <view class="list">
    <view class="item" v-for="item in list" :key="item.id">
      <view class="u-flex u-row-between u-m-b-12">
        <view class="u-flex">
          <image style="width: 100rpx;height: 100rpx;flex-shrink: 0;margin-right: 28rpx;" :src="userInfo.avatar" mode="aspectFill" />
          <text class="u-font-28">{{ userInfo.nickName }}</text>
        </view>
        <image style="width: 28rpx;height: auto;" src="../../../static/my/share3.png" mode="widthFix" @click="share(item, true)" />
      </view>
      <view class="u-font-28 u-m-b-14" id="title" @click="copy('title')">{{ item.title }}</view>
      <view class="ql-editor" id="ql-editor" @click="copy('ql-editor')" v-html="item.content"></view>
      <view class="u-flex u-flex-wrap" style="gap: 12rpx;">
        <image style="width: 178rpx;height: 240rpx;" v-for="(img, index) in item.url.split(',')" :src="img" @click="previewImage(item, index)" mode="aspectFill" />
      </view>
    </view>
    <a-empty v-if="!list.length"></a-empty>
  </view>
</template>

<script>
import "@vueup/vue-quill/dist/vue-quill.snow.css"
import { getMaterialsList } from '@/api/index'
import { wxShare } from '@/common/util'

export default {
  data() {
    return {
      pageNum: 1,
      list: [],
      pages: 0,
      userInfo: {},
    };
  },
  mounted() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.getPage()
  },
  methods: {
    copy(id) {
     const richTextElement = document.getElementById(id)
      const pureText = richTextElement.textContent || richTextElement.innerText;
      navigator.clipboard.writeText(pureText).then(() => {
        uni.showToast({
          title: '复制成功',
          icon: 'none'
        })
      }).catch(err => {
        uni.showToast({
          title: '复制失败',
          icon: 'none'
        })
      });
    },
    previewImage(item, index) {
      uni.previewImage({
        urls: item.url.split(','),
        current: index,
        longPressActions: {
          itemList: ['保存图片'],
          success: function(data) {
            uni.showToast({
              title: '长按图片保存',
              icon: 'none',
              mask: true
            })
            // uni.showLoading({ mask: true })
            // const link = document.createElement('a');
            // link.href = item.url.split(',')[data.index];
            // link.setAttribute('download', '图片.png');
            // document.body.appendChild(link);
            // link.click();
            // document.body.removeChild(link);
            // uni.hideLoading()
          },
          fail: function(err) {
            console.log(err.errMsg);
          }
        }
      });
    },
    getPage() {
      uni.showLoading({ mask: true })
      getMaterialsList({pageNum: this.pageNum, pageSize: 20, deptId: uni.getStorageSync('userInfo').deptId, category: '6', status: '0'}).then(res => {
        uni.hideLoading()
        this.list = [...this.list, ...res.rows]
        this.pages = Math.ceil(res.total / 20)
      })
    },
    share(item, f) {
      if(navigator.share) {
        // 假设图片 URL 是有效的
        const imageUrl = item.url.split(',')[0];

        fetch(imageUrl)
          .then(response => response.blob())
          .then(blob => {
            const file = new File([blob], 'image.jpg', { type: blob.type });

            if (navigator.share && navigator.canShare?.({ files: [file] })) {
              navigator.share({
                title: item.title,
                url: this.httpUrl,
                files: [file],
              })
              .then(() => console.log('分享成功'))
              .catch(error => {
                console.log(error);
                const userInfo = uni.getStorageSync('userInfo')
                const shareInfo = {
                  title: item.title,
                  link: this.httpUrl,
                  imgUrl: item.url?item.url.split(',')[0]:'',
                  type: 1,
                }
                shareInfo.link = shareInfo.link + '?invitationCode=' + userInfo.invitationCode
                wxShare(shareInfo, f)
              });
            } else {
              const userInfo = uni.getStorageSync('userInfo')
              const shareInfo = {
                title: item.title,
                link: this.httpUrl,
                imgUrl: item.url?item.url.split(',')[0]:'',
                type: 1,
              }
              shareInfo.link = shareInfo.link + '?invitationCode=' + userInfo.invitationCode
              wxShare(shareInfo, f)
            }
          })
          .catch(error => {
            console.log(error);
            const userInfo = uni.getStorageSync('userInfo')
            const shareInfo = {
              title: item.title,
              link: this.httpUrl,
              imgUrl: item.url?item.url.split(',')[0]:'',
              type: 1,
            }
            shareInfo.link = shareInfo.link + '?invitationCode=' + userInfo.invitationCode
            wxShare(shareInfo, f)
          });
      }
    }
  },
  onReachBottom() {
    if(this.pageNum < this.pages) {
      this.pageNum++
      this.getPage()
    }
  },
};
</script>

<style lang="scss" scoped>
.list {
  width: 702rpx;
  margin: 0 auto;
  .item {
    width: 100%;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 16rpx 18rpx 22rpx;
  }
}
</style>
